<template lang="jade">
    div(class="row",v-loading="loading")
        div(class="col-md-7" )
            div(class="panel panel-default")
                div(class="panel-heading") 新建产品
                div(class="panel-body")
                    el-form(:model="product",label-width="100px",ref="form")
                        el-form-item(prop="name",label="产品标题:",:rules="[{required:true,message:'请填写产品标题'}]")
                            input(type="text",class="form-control",v-model="product.name")
                        el-form-item(prop="productTypeId",label="产品类型:",:rules="[{required:true,message:'请选择产品类型'}]")
                            el-select(filterable,
                                    :disabled="product.id"
                                    default-first-option,
                                    placeholder="请选择产品类型",
                                    v-model="product.productTypeId"
                                    style="width:100%")
                                el-option(v-for="item in productTypeList",
                                        :key="item.id",
                                        :label="item.name",
                                        :value="item.id")

                        el-form-item(prop="price",label="默认售价:",:rules="[{required:true,message:'请设置默认价格'},{type:'number',message:'价格必须是数字'}]")
                            input(type="number",class="form-control",v-model="product.price")
                        el-form-item(prop="remark",label="产品备注:")
                            el-input(type="textarea",v-model="product.remark")
                        el-form-item(label="sku列表")
                            product-sku-list(ref="productSkuList",v-model="product.productSkuList")
                div(class="panel-footer clearfix")
                    div(class="pull-right")
                        button(class="btn btn-primary",@click="save_product") 保存产品
        
        div(class="col-md-5")
                div(class="panel panel-default")
                    div(class="panel-heading") sku列表 
                    div(class="panel-body")
                        div(class="sku-options-container")
                            sku-list(:can-edit="false",
                                    v-model="skuList",
                                    @change="handleChange",
                                    :show-checkbox="true")
            
</template>
<script>

import Product from '../models/product';
import axios from 'axios';
import _ from 'lodash';
import SkuList from './sku-list';
import cartesianProduct from './cartesian-product';
import Sku from '../models/sku';

import Property from '../models/property';
import PropertyItem from '../models/property-item';
import SkuPropertyItem from '../models/sku-property-item';
import config from '../config/config';
import SkuItem from '../models/sku-item.js';
import ProductSku from '../models/product-sku.js';
import ProductSkuListView from './product-sku-list.vue';
import request from './el-request';


export default{
	data(){
		return{
            product: new Product(),
            productTypeList:[],
            afterSave: '1',
            productId: null,
            skuList:[],
            loading: false
		}
	},
    watch:{
        productId: function(val){
            if(val) this.get_product();
        },

        'product.productTypeId'(val){
            this.get_sku_elements();
        }
        
    },
	components:{
        'sku-list': SkuList,
        'product-sku-list':ProductSkuListView
	},
	methods:{
		get_product_type_options(){
            var vm = this;
            request.get.call(this,'/api/services/app/ProductType/GetProductTypeList').then(function(res){
                vm.productTypeList = res.data.result;
            });
        },

        save_product: function(){
            var vm = this;
            this.product.price  = parseFloat(this.product.price);
            var productSkuList = this.$refs.productSkuList.get_product_sku_list();
            if(productSkuList.length===0){
                this.$message({type:'warning',message:'产品至少需要一个sku'});
                return;
            }
            
            this.$refs.form.validate(function(valid){
                if(valid){
                    var api =    vm.product.id ? config.apis.update_product : config.apis.new_product;
                    var method = vm.product.id ? request.put : request.post;
                    method.call(vm, api, {
                        product: vm.product,
                        productSkuList: productSkuList
                    }).then((res)=> {
                        vm.$message({message:'保存成功',type:'success'});
                        vm.$router.push({path:'/product-list'})
                    });
                }
            });
        },
        get_sku_elements(){
            var vm = this;
            var params = {typeId: this.product.productTypeId}
            request.get.call(this, '/api/services/app/SkuQueryService/GetPropertyItems', params).then((res)=>{
                vm.skuList =  res.data.result;
                vm.re_checked();
            });
        },

        get_product(){
            var vm = this;
            var params = {productId: this.productId};
            request.get.call(this, '/api/services/app/productQs/GetProductWithSkuList',params).then((res)=>{
                vm.product = res.data.result;
                vm.re_checked();
                vm.$refs.productSkuList.update(res.data.result.skuElements);
            });
        },

        re_checked(){
            var vm = this;
            _.each(this.skuList, function(sku){
                var  index = _.findIndex(vm.product.productSkuList, function(item){return item.skuId==sku.id});
                if(index >-1) sku.checked=true;
            })
        },

        handleChange: function(vals){
            var productSkuList = _.map(vals, (val)=>{
                    var productSku = new ProductSku();        
                    productSku.price = val.price;
                    productSku.remark = val.remark;
                    productSku.propertyItems = val.skuPropertyItems;
                    productSku.skuId = val.id;
                    return productSku;
            });
            this.$refs.productSkuList.update(productSkuList);
        }
    },
    created(){
        this.get_product_type_options();
        this.productId = this.$route.params.productId;
    }
}
</script>
<style lang="scss">
    .sku-options-container{
        margin: -15px;
    }
    .sku-options-container table{
        border:0px;
        margin-bottom: 0px;
    }
    .sku-options-container table thead tr th,
    .sku-list table thead tr th{
        border-bottom: 0px;
    }
    .sku-options-container table tbody tr:last-child td{
        border-bottom: 0px;
    }
    .sku-options-container table tr td:first-child,
    .sku-options-container table tr th:first-child{
        border-left: 0px;
    }
    .sku-options-container table tr td:last-child,
    .sku-options-container table tr th:last-child{
        border-right: 0px;
    }
</style>
